<template>
  <!--  忘记密码-->
  <div class="container">
    <div class="title fc">分行者跟单社区</div>
    <div class="describe">MT4/MT5跟单系统社区一站式服务</div>
    <div class="content">
      <div class="fc step">
        <div class="fc">
          <div class="code fc">1</div>
          <div>手机验证</div>
          <i class="el-icon-minus"></i>
        </div>
        <div class="fc">
          <div class=" fc" :class="active === 1 || active === 2 ? 'active' : 'pass'">2</div>
          <div class="item">密码</div>
          <i class="el-icon-minus"></i>
        </div>
        <div class="fc">
          <div class=" fc" :class="active === 2 ? 'active' : 'pass'">3</div>
          <div class="item">完成</div>
        </div>
      </div>
      <div class="login_form">
        <el-form class="login_form" ref="form" :model="form" label-width="82px">
          <!-- 验证码验证-->
          <div v-if="active === 0">
            <el-form-item label="手机:" style="margin-bottom: 15px" prop="phone">
              <el-input prefix-icon="el-icon-phone-outline" style="text-align: left" size="small" v-model="phone"
                placeholder="请输入手机号"></el-input>
            </el-form-item>
            <div class="ft">
              <el-form-item label="验证码:" prop="code">
                <div class="ft">
                  <div>
                    <el-input size="small" v-model="yzcode" placeholder="手机短信验证" type="number"></el-input>
                  </div>
                  <el-form-item>
                    <div class="sms_code" @click="getYZM">{{ codeTxt }}</div>
                  </el-form-item>
                </div>
              </el-form-item>
            </div>

            <el-form-item>
              <div class="ft mgt-10">
                <div class="ft-14 login" @click="login">使用已有账户登录</div>
                <div class="">
                  <el-button size="mini" @click="onNextTab()">下一步</el-button>
                </div>
              </div>
            </el-form-item>

          </div>
          <!-- 密码验证-->
          <div v-if="active === 1">
            <el-form-item prop="password" label="新密码:">
              <el-input size="small" style="text-align: left" placeholder="请输入密码" prefix-icon="el-icon-lock"
                v-model="password" show-password>
              </el-input>
            </el-form-item>
            <el-form-item prop="confirm_password" label="确认密码:">
              <el-input size="small" style="text-align: left" placeholder="请再次输入密码" prefix-icon="el-icon-lock"
                v-model="confirm_password" show-password>
              </el-input>
            </el-form-item>

            <el-form-item>
              <div class="ft mgt-10">
                <div class="ft-14 login" @click="login">使用已有账户登录</div>
                <div>
                  <el-button size="mini" @click="onNextTab1()">下一步</el-button>
                </div>
              </div>
            </el-form-item>
          </div>

        </el-form>
        <!-- 完成状态 -->
        <div class="fc" v-if="active === 2">
          <div>重置成功！</div>
          <div class="mgr-5 path" @click="login">账号登录</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { sendSmsApi, forgetApi } from '@/api/index'
export default {
  name: 'ForgetView',
  data() {

    /* const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.form.checkPass !== '') {
          this.$refs.form.validateField('checkPass')
        }
        callback()
      }
    }
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.form.pass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    } */
    return {
      form: {},
      active: 0,
      phone: '',
      password: '',
      confirm_password: '',
      yzcode: '',
      time: 60000,
      timer: null,
      email: '',
      code: '',
      // type: 0,
      invCode: "",
      codeTxt: "获取验证码",
      status: null,

      /* rules: {
        phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ]
      }, */
      //countdown: 0 // 设定初始倒计时时间
    }
  },
  methods: {
    login() {
      this.$router.push('login')
    },
    onNextTab() {
      if(!this.yzcode){
        this.$message.error("验证码不能为空");
        return;
      }

      let data = {
          type: this.type,
          phone: this.phone,
          email: this.email,
         /*  password: this.password,
          confirm_password: this.confirm_password, */
          ver_code:this.yzcode,
        };

        forgetApi(data).then(res => {
          console.log(res.data)
          //this.$message.success(res.data.msg)
          this.active = 1
        })

    },

    onNextTab1() {
      if (this.active === 1) {
        if (!this.password) {
          this.$message.error("密码不能为空");
          return;
        }
        if (!this.confirm_password) {
          this.$message.error("确认密码不能为空");
          return;
        }

        if (this.password !== this.confirm_password) {
          this.$message.error("两次密码输入必须一致");
          return;
        }

        let data = {
          type: this.type,
          phone: this.phone,
          email: this.email,
          password: this.password,
          confirm_password: this.confirm_password,
          ver_code:this.yzcode,
        };

        forgetApi(data).then(res => {
          console.log(res.data)
          this.$message.success(res.data.msg)
          this.active = 2
        })
      }

    },


    startTimer() {
      console.log('点击了')
      const interval = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--
        } else {
          clearInterval(interval)
        }
      }, 1000)
    },


    getYZM() {
      /*if (this.isActive === 0 && this.phone === "") {
        this.$message.error("请输入正确手机号");
        return;
      } */
     /*  if () {
        this.$message({ message: '请输入手机号', type: 'error' })
      } */
      if (!this.email && !this.phone) {
        this.$message({ message: '请输入正确的手机号或邮箱', type: 'error' })
      }
      if (this.time !== 60000) {
        return;
      }

      let data = {
        type: this.type,
        phone: this.phone,
        email: this.email,
      };

      sendSmsApi(data).then(res => {
        this.timer = setInterval(() => {
          this.time -= 30;
          this.codeTxt = Math.floor(this.time / 1000) + "s后重试";
          if (this.time < 30) {
            clearInterval(this.timer);
            this.time = 60000;
            this.codeTxt = "获取验证码";
          }
        }, 30);

        console.log(res.data)
      });
    },
  }
}
</script>

<style scoped lang="scss">
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.container {
  // margin-top: 200px;
  background: url("@/assets/img/login-background.svg") no-repeat center;
  // height: 942px;
  width: 100%;
  background-size: 100%;

  .title {
    margin-top: 40px;
    font-size: 26px;
    font-weight: 600;
  }

  .describe {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.45);
    margin-top: 12px;
    margin-bottom: 40px;
  }
}

.login_form {
  min-width: 260px;
  width: 368px;
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5;
  margin: 0 auto;
}

.step {
  font-size: 14px;
  margin-bottom: 30px;

  .code {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    //border: 1px solid rgba(0,0,0,.25);
    background: #04d1b3;
    color: #ffffff;
    margin-right: 8px;
  }

  .pass {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .25);
    background: #ffffff;
    color: rgba(0, 0, 0, .25);
    margin-right: 8px;
  }

  .el-icon-minus {
    margin-left: 10px;
    margin-right: 20px;
    color: rgba(0, 0, 0, .25);
    width: 20px;
  }

  .item {
    color: rgba(0, 0, 0, .65);
  }
}

.login {
  color: #04d1b3;
  cursor: pointer;
}

.el-button {
  width: 100%;
  background-color: #04d1b3;
  border-color: #04d1b3;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
  color: #ffffff;

}

.sms_code {
  font-size: 12px;
  line-height: 30px;
  height: 32px;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  padding-left: 5px;
  padding-right: 5px;
  margin-left: 15px;
}

.account {
  border: 1px solid #d9d9d9;
  font-size: 14px;
  border-radius: 3px;
  height: 32px;
  padding: 0 6px;
  margin-left: 13px;
  background: #ffffff;
}

.path {
  color: #04d1b3;
  border-bottom: 1px solid #04d1b3;
  cursor: pointer;
}

.active {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  //border: 1px solid rgba(0,0,0,.25);
  background: #04d1b3;
  color: #ffffff;
  margin-right: 8px;
}
</style>
